<template>
	<view v-if="props.modalName == props.tag" class="cu-modal bottom-modal" :class="props.modalName == props.tag ? 'show' : ''">
		<view class="cu-dialog" @touchstart="start" @touchend="end" @touchmove="move">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		watch
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	const emit = defineEmits(['up','down']);
	const props = defineProps({
		modalName: {
			type: String,
			default: ''
		},
		tag: {
			type: String,
			default: 'AuthorizationModal'
		}
	});

	watch(() => props.modalName, (newValue, oldValue) => {
		if (newValue.length > 0) {

		}
	});
	let startData = {
		clientX: 0,
		clientY: 0,
	}
	let moveX = 0
	let touch = {
		clientX: 0,
		clientY: 0
	}
	let transition=''
	onShow((option : any) => {

	});
	// 触摸touch事件
	const start = (e) => {  //@touchstart 触摸开始
		transition = '.1s';
		startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标         
		startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
	}
	const end = (e) => {  //@touchend触摸结束
		moveX = 0;  //触摸事件结束恢复原状
		transition = '.5s';
		if (Math.abs(touch.clientX - startData.clientX) > 100) {  //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
		} else {
		}
	}
	const move = (event) => {  //@touchmove触摸移动
		let touch = event.touches[0];  //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
		touch = touch;
		let data = touch.clientY - startData.clientY;
		if (touch.clientY < startData.clientY) {  //向左移动
			if (data < -250) {
				data = -250;
				
			}
			//console.log('上：'+data)
			emit('up',data)
		}
		if (touch.clientY > startData.clientY) {  //向右移动
			if (moveX == 0) {
				data = 0
			} else {
				if (data > 50) {
					data = 50;
					
				}
			}
			//console.log('下：'+data)
			emit('down',data)
		}
		moveX = data;
	}
</script>

<style scoped>
	.cu-modal {
		background: none;
		pointer-events: none;
	}

	.cu-dialog {
		background: none;
		pointer-events: all;
		z-index:999
	}
</style>